<template>
	<div class="system-user">
		<div class="_box">
			<div class="dept _scroller1" :class="[dept.expand ? '_expand' : '_collapse']">
				<div class="label">
					<div>组织架构</div>

					<ul>
						<li>
							<el-tooltip content="刷新">
								<i class="el-icon-refresh" @click="deptRefresh()"></i>
							</el-tooltip>
						</li>

						<li v-permission="$service.system.dept.permission.order">
							<el-tooltip content="拖动排序">
								<i class="el-icon-s-operation" @click="dept.isDrag = true"></i>
							</el-tooltip>
						</li>

						<li class="no" v-show="dept.isDrag">
							<el-button type="text" size="mini" @click="deptOrder(true)"
								>保存</el-button
							>
							<el-button type="text" size="mini" @click="deptOrder(false)"
								>取消</el-button
							>
						</li>
					</ul>
				</div>

				<div class="container" @contextmenu.prevent="deptCM">
					<el-tree
						:data="dept.list"
						:props="{
							label: 'name'
						}"
						:draggable="dept.isDrag"
						:allow-drag="deptAllowDrag"
						:allow-drop="deptAllowDrop"
						v-loading="dept.loading"
						node-key="id"
						highlight-current
						default-expand-all
						:expand-on-click-node="false"
						@node-contextmenu="deptCM"
						@node-click="deptClick"
					></el-tree>
				</div>
			</div>

			<div class="user">
				<div class="label">
					<div>成员列表</div>
				</div>

				<div class="container">
					<cl-crud @load="onLoad">
						<template #slot-filter="{scope}">
							<!--分组-->
							<!--							<el-select-->
							<!--								size="mini"-->
							<!--								v-model="selects.departmentId"-->
							<!--								placeholder="请选择分组"-->
							<!--								@change="-->
							<!--									val => {-->
							<!--										refresh({ departmentId: val });-->
							<!--									}-->
							<!--								"-->
							<!--							>-->
							<!--								<el-option label="全部" value=""></el-option>-->
							<!--								<el-option-->
							<!--									:label="item.name"-->
							<!--									:value="item.id"-->
							<!--									v-for="(item, index) in options.departmentBelow"-->
							<!--									:key="index"-->
							<!--								></el-option>-->
							<!--							</el-select>-->
							<!--身份-->
							<!--							<el-select-->
							<!--								size="mini"-->
							<!--								v-model="selects.identity"-->
							<!--								placeholder="请选择身份"-->
							<!--								@change="-->
							<!--									val => {-->
							<!--										refresh({ identity: val });-->
							<!--									}-->
							<!--								"-->
							<!--							>-->
							<!--								<el-option label="全部身份" value=""></el-option>-->
							<!--								<el-option label="上级" value="1"></el-option>-->
							<!--								<el-option label="成员" value="0"></el-option>-->
							<!--							</el-select>-->
							<!--角色-->
							<el-select
								size="mini"
								v-model="selects.roleId"
								placeholder="请选择角色"
								filterable
								@change="
									val => {
										refresh({ roleId: val });
									}
								"
							>
								<el-option label="全部角色" value></el-option>
								<el-option
									:label="item.name"
									:value="item.id"
									v-for="(item, index) in options.role"
									:key="index"
								></el-option>
							</el-select>
						</template>
						<template #slot-add-btn="{scope}">
							<el-button
								size="mini"
								type="primary"
								@click="addStaff()"
								v-permission="$service.account.staff.permission.add"
							>
								<i class="el-icon-plus"></i>添加员工
							</el-button>
						</template>

						<!-- 单个转移 -->
						<template #slot-move="{ scope }">
							<el-button
								v-permission="$service.system.user.permission.move"
								type="text"
								size="mini"
								@click="toMove(scope.row)"
								>转移</el-button
							>
						</template>
						<!-- 批量添加标签 -->
						<template #slot-add-tag>
							<el-button
								style="margin-left:10px"
								size="mini"
								type="primary"
								@click="addLabels"
								:disabled="selectRow.length > 0 ? false : true"
								>批量添加标签</el-button
							>
						</template>
						<!-- 员工标签 -->
						<template #table-column-label="{ scope }">
							<div class="label-list">
								<el-tag
									v-for="(item, index) in scope.row.labelList"
									:key="index"
									:disable-transitions="false"
									@close="removeLabel(scope.row, index)"
									size="small"
									style="margin: 4px"
									closable
									>{{ item }}</el-tag
								>
								<a
									class="add-label"
									@click="addLabel(scope.row)"
									v-if="scope.row.labelList && scope.row.labelList.length === 0"
									>添加标签</a
								>
								<i class="el-icon-plus" @click="addLabel(scope.row)" v-else></i>
							</div>
						</template>
					</cl-crud>
				</div>
			</div>

			<div
				class="icon-arrow"
				:class="[dept.expand ? '_expand' : '_collapse']"
				@click="deptExpand"
			>
				<i class="el-icon-arrow-left" v-if="dept.expand"></i>
				<i class="el-icon-arrow-right" v-else></i>
			</div>
		</div>

		<cl-form ref="cl-form">
			<!-- 组织转移 -->
			<template #slot-move-dept="{ scope }">
				<div class="system-user-move-dept">
					<el-tree
						:data="dept.list"
						:props="{
							label: 'name'
						}"
						node-key="id"
						highlight-current
						@node-click="moveDeptClick"
					></el-tree>
				</div>
			</template>
		</cl-form>
		<cl-context-menu ref="context-menu"></cl-context-menu>
		<!--创建标签弹窗-->
		<label-dig ref="label" :item="item" @refresh="refresh"></label-dig>
	</div>
</template>

<script>
import { deepTree, isArray, revDeepTree } from '@/cool/utils/index';
import { checkPerm } from '@/cool/permission/index';
import LabelDig from './components/label-dig';
export default {
	data() {
		return {
			crud: null,
			dept: {
				isDrag: false,
				loading: false,
				expand: true,
				list: [],
				recursion: []
			},
			selects: {},
			options: {
				role: [],
				department: [],
				departmentBelow: [],
				label: []
			},
			formTitle: null,
			item: null,
			selectRow: []
		};
	},
	components: {
		LabelDig
	},

	activated() {
		// 获取组织分组列表
		this.deptRefresh();

		// 获取角色列表
		this.getRoleList();

		// 获取组织列表
		this.getDepartment();

		// 获取标签列表
		this.getLabelList();
	},

	methods: {
		refresh(params) {
			this.crud.refresh(params);
		},

		onLoad({ ctx, app }) {
			this.crud = app;
			let self = this;

			ctx.permission({
				update: checkPerm('sys:user:update')
			});
			ctx.service(this.$service.system.user)
				.set('table', {
					columns: [
						{
							type: 'selection',
							label: '全选',
							align: 'center',
							width: '60px'
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: '60'
						},
						{
							prop: 'username',
							label: '员工',
							align: 'center',
							'min-width': 150
						},
						{
							prop: 'departmentName',
							label: '组织',
							align: 'center',
							emptyText: '无',
							'min-width': 150
						},
						{
							prop: 'roleName',
							label: '角色',
							emptyText: '无',
							align: 'center',
							'min-width': 150
						},
						{
							prop: 'label',
							label: '标签',
							align: 'center',
							'min-width': 150
						}
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},

					op: {
						layout: ['slot-move', 'edit', 'delete']
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('upsert', {
					props: {
						width: '470px',
						labelWidth: '100px'
					},
					items: [
						{
							prop: 'username',
							label: '用户名：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入员工登录用户名',
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '用户名不能为空'
								}
							]
						},
						{
							prop: 'nickName',
							label: '姓名：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入员工姓名',
									clearable: true
								}
							}
						},
						{
							hidden: false,
							prop: 'password',
							label: '登录密码：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入员工登录密码',
									type: 'password',
									showPassword: true,
									clearable: true,
									autoComplete: 'new-password'
								}
							},
							rules: [
								{
									required: true,
									message: '密码不能为空'
								},
								{
									min: 6,
									max: 16,
									message: '密码长度在 6 到 16 个字符'
								},
								{
									validator: this.validatePassword,
									trigger: 'blur'
								}
							]
						},
						{
							hidden: false,
							prop: 'repeatPassword',
							label: '确认密码：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请确认员工登录密码',
									type: 'password',
									showPassword: true,
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '请确认登录密码'
								},
								{
									min: 6,
									max: 16,
									message: '密码长度在 6 到 16 个字符'
								},
								{
									validator: this.validateRepeatPassword,
									trigger: 'blur'
								}
							]
						},
						// {
						// 	prop: 'identity',
						// 	label: '身份：',
						// 	value: 0,
						// 	component: {
						// 		name: 'el-radio-group',
						// 		options: [
						// 			{
						// 				label: '上级',
						// 				value: 1
						// 			},
						// 			{
						// 				label: '成员',
						// 				value: 0
						// 			}
						// 		],
						// 		attrs: {
						// 			clearable: true
						// 		}
						// 	},
						// 	rules: {
						// 		required: true,
						// 		message: '请确认登录密码'
						// 	}
						// },
						// {
						// 	prop: 'roleIdList',
						// 	label: '角色：',
						// 	// hidden: true,
						// 	span: 22,
						// 	value: [],
						// 	component: {
						// 		name: 'cl-role-select',
						// 		props: {
						// 			'multiple-limit': 1
						// 		},
						// 		options: []
						// 	},
						// 	rules: {
						// 		required: true,
						// 		message: '角色不能为空'
						// 	}
						// },
						{
							prop: 'roleIdList',
							label: '角色：',
							span: 22,
							value: [],
							component: {
								name: 'el-select',
								props: {
									// 'multiple-limit': 1,
									multiple: true,
									filterable: true
								},
								options: []
							},
							rules: {
								required: true,
								message: '角色不能为空'
							}
						},
						{
							span: 2,
							component: {
								name: 'add-role',

								methods: {
									addRole() {
										this.$refs['cl-form'].open({
											props: {
												title: '新增角色',
												width: '550px',
												'label-width': '100px'
											},
											items: [
												{
													prop: 'name',
													label: '名称：',
													component: {
														name: 'el-input',
														attrs: {
															placeholder: '请填写名称',
															clearable: true
														}
													},
													rules: {
														required: true,
														message: '名称不能为空'
													}
												},
												{
													hidden: true,
													prop: 'label',
													label: '标识：',
													component: {
														name: 'el-input',
														attrs: {
															placeholder: '请填写标识',
															clearable: true
														}
													},
													rules: {
														required: true,
														message: '标识不能为空'
													}
												},
												{
													prop: 'remark',
													label: '备注：',
													span: 24,
													component: {
														name: 'el-input',
														attrs: {
															placeholder: '请填写备注',
															clearable: true
														},
														props: {
															type: 'textarea',
															rows: 4
														}
													}
												},
												{
													prop: 'menuIdList',
													label: '功能权限：',
													span: 12,
													component: {
														name: 'cl-role-tree',
														props: {
															placeholder: '请选择'
														}
													},
													rules: {
														required: true,
														message: '功能权限不能为空'
													}
												},
												{
													prop: 'departmentIdList',
													label: '数据权限：',
													span: 12,
													value: [],
													component: {
														name: 'cl-dept-tree'
													}
												}
											],
											on: {
												submit: ({ data, done, close }) => {
													self.$service.account.role
														.add(data)
														.then(res => {
															self.$message.success('新增成功');
															let { id } = res;
															// 更新角色列表
															self.$service.account.role
																.list()
																.then(res => {
																	self.options.role = res;
																	let role = [];
																	res.forEach(item => {
																		role.push({
																			label: item.name,
																			value: item.id
																		});
																	});
																	app.setData(
																		'upsert.items[prop:roleIdList].component.options',
																		role
																	);
																	let idArr = app.data(
																		'upsert.form.roleIdList'
																	);
																	idArr.push(id);
																	app.setData(
																		'upsert.form.roleIdList',
																		idArr
																	);
																	// app.setData(
																	// 	'upsert.items[prop:roleIdList].value',
																	// 	[id]
																	// );
																});
															close();
														})
														.catch(err => {
															self.$message.error(err);
															done();
														});
												}
											}
										});
									}
								},

								render() {
									return (
										<div>
											<el-tooltip
												effect="dark"
												content="添加角色"
												placement="top">
												<i
													class="el-icon-plus"
													style="margin-left: -90px; cursor: pointer; color: #FF4400;"
													on-click={this.addRole}></i>
											</el-tooltip>

											<cl-form ref="cl-form"></cl-form>
										</div>
									);
								}
							}
						}
					]
				})
				.set('search', {
					key: {
						placeholder: '请输入员工名称'
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'slot-add-btn',
						'slot-filter',
						'slot-add-tag',
						'flex1',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					let { list } = await next(params);

					list.map(e => {
						if (e.roleName) {
							this.$set(e, 'roleNameList', e.roleName.split(','));
						}
						e.status = Boolean(e.status);
						e.labelList = e.label ? e.label.split(',') : [];
					});

					render(list);
				})
				.on('open', (isEdit, form) => {
					app.setData('upsert.items[prop:password].hidden', false);
					app.setData('upsert.items[prop:repeatPassword].hidden', false);
					// 编辑时隐藏密码
					if (isEdit) {
						app.setData('upsert.items[prop:password].hidden', true);
						app.setData('upsert.items[prop:repeatPassword].hidden', true);

						// 角色列表还原
						let roleIdList = [];
						form.roleIdList.forEach(item => {
							this.options.role.forEach(role => {
								if (item.id === role.id) {
									roleIdList.push(item.id);
								}
							});
						});
						app.setForm('roleIdList', roleIdList);
					}

					let role = [];
					this.options.role.forEach(item => {
						role.push({
							label: item.name,
							value: item.id
						});
					});
					app.setData('upsert.items[prop:roleIdList].component.options', role);
				})
				.on('submit', (isEdit, data, { next }) => {
					this.options.department.forEach(item => {
						if (item.id === data.departmentId) {
							data.departmentName = item.name;
						}
					});
					let departmentId = this.departmentId;

					if (!departmentId) {
						departmentId = this.dept.list[0].id;
					}
					next({
						...data,
						departmentId
					});
				})
				.done();

			app.refresh();
		},
		// 添加标签
		addLabel(item) {
			this.item = item;
			this.$refs.label.open(this.options.label, false);
		},
		// 删除标签
		removeLabel(obj, i) {
			let labelArr = obj.labelList.filter((item, index) => {
				if (index === i) {
					return false;
				}
				return true;
			});
			this.$service.account.staff
				.updateUserProp({
					// ...obj,
					// id: obj.id,
					id: obj.id,
					label: labelArr.join(',')
				})
				.then(() => {
					this.$message.success('删除成功');
					this.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		// 获取标签列表
		getLabelList() {
			this.$service.account.staff.labelListOfUsers().then(res => {
				this.options.label = res;
			});
		},
		// 批量绑定运营人
		addLabels() {
			let ids = '';
			this.selectRow.forEach(item => {
				ids = ids ? ids + ',' + item.id : item.id;
			});
			this.item = ids;
			this.$refs.label.open(this.options.label, true);
		},
		deptRefresh() {
			this.dept.isDrag = false;
			this.dept.loading = true;

			this.$service.system.dept
				.list()
				.then(res => {
					this.dept.list = deepTree(res);
					this.options.department = res;
				})
				.done(() => {
					this.dept.loading = false;
				});
		},

		deptCM(e, d) {
			const { permission } = this.$store.state.menu;
			let flag = 0;
			for (let i = 0; i < permission.length; i++) {
				if (
					permission[i] === 'sys:department:add' ||
					permission[i] === 'sys:department:update' ||
					permission[i] === 'sys:department:delete' ||
					permission[i] === 'sys:user:add'
				) {
					flag++;
				}
			}
			if (flag === 0) {
				return false;
			}

			let list = [
				{
					label: '新增',
					'suffix-icon': 'el-icon-plus',
					callback: (item, done) => {
						this.formTitle = '新增组织';
						this.deptEdit({
							name: '',
							parentName: d.name,
							parentId: d.id
						});
						done();
					}
				},
				{
					label: '编辑',
					'suffix-icon': 'el-icon-edit',
					callback: (item, done) => {
						this.formTitle = '编辑组织';
						this.deptEdit(d);
						done();
					}
				}
			];

			if (!d) {
				d = this.dept.list[0];
			}

			if (d.parentId) {
				list.push({
					label: '删除',
					'suffix-icon': 'el-icon-delete',
					callback: (item, done) => {
						this.deptDel(d);
						done();
					}
				});
			}

			list.push({
				label: '新增成员',
				'suffix-icon': 'el-icon-user',
				callback: (item, done) => {
					this.departmentId = d.id;
					this.crud.append({ departmentId: d.id });
					done();
				}
			});

			this.$refs['context-menu'].open(e, {
				list
			});
		},

		deptExpand() {
			this.dept.expand = !this.dept.expand;
		},

		deptClick(e) {
			this.$refs['context-menu'].close();

			this.selects.dept = e;

			let ids = revDeepTree(e.children).map(e => e.id);

			ids.unshift(e.id);

			this.departmentId = e.id;

			this.refresh({ departmentId: ids.join(',') });
		},

		deptAllowDrag({ data }) {
			return data.parentId;
		},

		deptAllowDrop(draggingNode, dropNode) {
			return dropNode.data.parentId;
		},

		deptEdit(e) {
			const method = e.id ? 'update' : 'add';

			this.$refs['cl-form'].open({
				props: {
					title: this.formTitle,
					width: '550px',
					showClose: false,
					'label-width': '100px'
				},
				items: [
					{
						label: '组织名称',
						prop: 'name',
						value: e.name,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请填写组织名称'
							}
						},
						rules: {
							required: true,
							message: '组织名称不能为空'
						}
					},
					{
						label: '上级组织',
						prop: 'parentId',
						value: e.parentName || '...',
						component: {
							name: 'el-input',
							attrs: {
								disabled: true
							}
						}
					},
					{
						label: '排序',
						prop: 'orderNum',
						value: e.orderNum || 0,
						component: {
							name: 'el-input-number',
							props: {
								'controls-position': 'right',
								min: 0,
								max: 100
							}
						}
					}
				],
				on: {
					submit: ({ data, done, close }) => {
						this.$service.system.dept[method]({
							id: e.id,
							parentId: e.parentId,
							name: data.name,
							orderNum: data.orderNum
						})
							.then(() => {
								this.$message.success(
									`${method == 'update' ? '编辑' : '新增'}组织${data.name}成功`
								);
								close();
								this.deptRefresh();
								this.getDepartment();
							})
							.catch(err => {
								this.$message.error(err);
								done();
							});
					}
				}
			});
		},
		deptDel(e) {
			const del = f => {
				this.$service.system.dept
					.delete({
						ids: e.id,
						deleteUser: f
					})
					.then(() => {
						if (f) {
							this.$message.success('删除成功');
						} else {
							this.$confirm('该组织用户已移动到组织顶级', '删除成功');
						}
					})
					.done(() => {
						this.deptRefresh();
						this.refresh();
					});
			};

			this.$confirm('该操作会删除组织下的所有用户，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '直接删除',
				cancelButtonText: '保留用户',
				distinguishCancelAndClose: true
			})
				.then(() => {
					del(true);
				})
				.catch(action => {
					if (action == 'cancel') {
						del(false);
					}
				});
		},

		deptOrder(f) {
			if (f) {
				this.$confirm('组织架构已发生改变，是否保存？', '提示', {
					type: 'warning'
				})
					.then(() => {
						const deep = (list, pid) => {
							list.forEach(e => {
								e.parentId = pid;
								ids.push(e);

								if (e.children && isArray(e.children)) {
									deep(e.children, e.id);
								}
							});
						};

						let ids = [];

						deep(this.dept.list, null);

						this.$service.system.dept
							.order(
								ids.map((e, i) => {
									return {
										id: e.id,
										parentId: e.parentId,
										orderNum: i
									};
								})
							)
							.then(() => {
								this.$message.success('更新排序成功');
							})
							.catch(err => {
								this.$message.error(err);
							})
							.done(() => {
								this.deptRefresh();
								this.dept.isDrag = false;
							});
					})
					.catch(() => {});
			} else {
				this.deptRefresh();
			}
		},

		async toMove(e) {
			let ids = [];

			if (!e) {
				ids = this.selects.ids;
			} else {
				ids = [e.id];
			}

			let that = this;

			this.$refs['cl-form'].open({
				props: {
					title: '组织转移',
					width: '600px',
					showClose: false,
					'label-width': '80px'
				},
				items: [
					{
						label: '选择组织',
						prop: 'dept',
						component: {
							name: 'system-user-move-dept',

							methods: {
								selectRow(e) {
									this.$emit('input', e);
								}
							},

							render() {
								return (
									<div class="system-user-move-dept">
										<el-tree
											data={that.dept.list}
											{...{
												props: {
													props: {
														label: 'name'
													}
												}
											}}
											node-key="id"
											highlight-current
											on-node-click={this.selectRow}></el-tree>
									</div>
								);
							}
						}
					}
				],
				on: {
					submit: ({ data, done, close }) => {
						if (!data.dept) {
							this.$message.warning('请选择组织');
							return done();
						}

						const { name, id } = data.dept;

						this.$confirm(`是否将用户转移到组织 ${name} 下`, '提示', {
							type: 'warning'
						})
							.then(() => {
								this.$service.system.user
									.move({
										departmentId: id,
										userIds: ids
									})
									.then(() => {
										this.$message.success('转移成功');
										close();
										this.refresh();
									})
									.catch(err => {
										this.$message.error(err);
										done();
									});
							})
							.catch(() => {});
					}
				}
			});
		},

		// 添加角色弹窗
		addStaff() {
			this.crud.add();
		},

		// 获取角色列表
		getRoleList() {
			this.$service.account.role.list().then(res => {
				this.options.role = res;
			});
		},

		// 获取组织列表
		getDepartment() {
			let params = {
				isBelow: true
			};
			this.$service.common.belowDepartments(params).then(res => {
				this.options.departmentBelow = res;
			});
		},

		// 校验密码
		validatePassword(rule, value, callback) {
			// 得到确认密码
			let password = this.crud.getData('upsert.form.repeatPassword');
			if (password) {
				if (value === password) {
					if (password.length < 6) {
						callback(new Error('密码不能低于6位!'));
					} else {
						let reg = /^[a-zA-Z0-9]/;
						if (!reg.test(password)) {
							callback(new Error('密码需包含数字或字母且不能以特殊字符开头!'));
						} else {
							callback();
						}
					}
				} else {
					callback(new Error('两次输入密码不一致!'));
				}
			} else {
				callback();
			}
		},

		// 确认登录密码
		validateRepeatPassword(rule, value, callback) {
			// 得到登录密码
			let password = this.crud.getData('upsert.form.password');
			if (value === password) {
				if (password.length < 6) {
					callback(new Error('密码不能低于6位!'));
				} else {
					let reg = /^[a-zA-Z0-9]/;
					if (!reg.test(password)) {
						callback(new Error('密码需包含数字或字母且不能以特殊字符开头!'));
					} else {
						callback();
					}
				}
			} else {
				callback(new Error('两次输入密码不一致!'));
			}
		}
	}
};
</script>

<style lang="stylus">
.system-user-move-dept {
	border: 1px solid #eee;
	margin-top: 5px;
	padding: 5px;
	border-radius: 3px;
	position: relative;
	top: -8px;
}
</style>

<style lang="stylus" scoped>
.system-user {
	._box {
		display: flex;
		height: 100%;
		position: relative;
	}

	.icon-arrow {
		position: absolute;
		top: calc(50% - 20px);
		display: inline-block;
		z-index: 9;
		cursor: pointer;
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;

		i {
			position: absolute;
			top: -8px;
			left: 0;
			color: #666;
		}

		&._expand {
			border-right: 15px solid #f7f7f7;
			left: 285px;
		}

		&._collapse {
			left: 0;
			border-left: 15px solid #f7f7f7;

			i {
				left: -15px;
			}
		}

		&:hover {
			opacity: 0.8;
		}
	}

	.dept {
		height: 100%;
		width: 300px;
		background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		transition: width 0.3s;
		margin-right: 10px;

		&._collapse {
			margin-right: 0;
			width: 0;
		}

		>>>.el-tree-node__content {
			height: 36px;
		}

		ul {
			display: flex;

			li {
				list-style: none;
				margin-left: 5px;
				cursor: pointer;
				padding: 5px;
				display: flex;
				justify-content: center;
				align-items: center;

				&:not(.no):hover {
					background-color: #eee;
				}
			}
		}
	}

	.user {
		width: calc(100% - 310px);
		flex: 1;
	}

	.dept, .user {
		.label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;
			padding: 0 10px;
			background-color: #fff;
			letter-spacing: 1px;

			div {
				display: flex;
				align-items: center;
				font-size: 15px;
				color: $color;
				flex: 1;
				min-width: 100px;

				span {
					font-size: 12px;
					position: relative;
					left: 5px;
					background-color: $color2;
					color: #fff;
					border-radius: 10px;
					padding: 0.5px 5px;
				}
			}

			i {
				font-size: 18px;
				color: $color;
				cursor: pointer;

				&:hover {
					color: $color2;
				}
			}
		}

		.container {
			height: calc(100% - 40px);
		}
	}
}
>>>.el-select {
	margin-left 10px
}
// 员工标签信息
.label-list {
		flexBox(center, center, row, wrap)
		.add-label {
			color $main-color
			cursor pointer
			transition .3s
			&:hover {
				opacity .8
			}
		}
		.el-icon-plus {
			font-size 14px
			color $main-color
		}
	}
</style>
